<template>
  <el-dropdown @command="handleLanguage">
    <div>
      <svg-icon
        style="color:#fff; font-size:20px"
        icon-class="language"
      />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        command="zh"
        :disabled="'zh'===$i18n.locale"
      >中文</el-dropdown-item>
      <el-dropdown-item
        command="en"
        :disabled="'en'===$i18n.locale"
      >en</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods: {
    handleLanguage(newLang) {
      // 这个函数会在下拉菜单被点击时触发，
      // 在语言插件安装后，会在 this 添加 $t 作为翻译函数
      // 还会有一个 $i18n 的实例对象

      this.$i18n.locale = newLang
      this.$message.success(this.$t('switchLange'))
      localStorage.setItem('lang', newLang)
    }
  }
}
</script>

<style>
</style>
